<template>
  <div v-bind:id="getId()" style="height: 300px; width: 200px">
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    data() {
      return {}
    },
    props: {
      // index由父组件传值，然后赋值给相应的Id
      index: '',
      item: null,
    },
    methods: {
      getId() {
        return "gauge" + this.index;
      },

      getOption() {
        return {
          series: [{
            name: '业务指标', // 参数
            type: 'gauge',
            min: this.item.minValue || 0, // 参数
            max: this.item.maxValue || 10, // 参数
            radius: '95%',  // 设置仪表盘大小
            axisLine: {            // 坐标轴线
              lineStyle: {       // 属性lineStyle控制线条样式
                color: [[0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
                width: 3,
                shadowColor: '#000000', //默认透明
                shadowBlur: 10,
              }
            },
            axisLabel: {            // 坐标轴小标记
              // show: false,
              textStyle: {       // 属性lineStyle控制线条样式
                fontWeight: 'bolder',
                color: '#000',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            axisTick: {            // 坐标轴小标记
              length: 10,        // 属性length控制线长
              lineStyle: {       // 属性lineStyle控制线条样式
                color: 'auto',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            splitLine: {           // 分隔线
              length: 15,         // 属性length控制线长
              lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                width: 3,
                color: '#auto',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            pointer: {           // 分隔线
              shadowColor: '#fff', //默认透明
              shadowBlur: 5,
              width: 4
            },
            title: {
              padding: [
                130,  // 上
                0, // 右
                5,  // 下
                0, // 左
              ],
              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize: 15,
                // fontStyle: 'italic',
                color: '#000',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            detail: {
              // backgroundColor: 'rgba(30,144,255,0.8)',
              // borderWidth: 1,
              // borderColor: '#fff',
              bottom: '20',
              shadowColor: '#fff', //默认透明
              shadowBlur: 5,
              fontSize: 15,
              offsetCenter: [0, '75%'],       // x, y，单位px
              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                color: '#000'
              }
            },
            data: [{
              value: this.item['value'],
              name: this.item['name'] || '默认'
            }] // 参数
          },
          ]
        };
      },
      initChart() {
        let chart = this.$echarts.init(document.getElementById(this.getId()));
        chart.setOption(this.getOption());
      }
    },
    computed: {
      ...mapGetters(['getSewageSystem'])
    },
    mounted() {
      this.initChart();
    }
  }
</script>

<style>

</style>
